<template>
  <el-main class="image-main" v-loading="loading">
    <div class="top p-3">
      <el-row :gutter="20">
        <el-col
          :span="6"
          :offset="0"
          v-for="(item, index) in list"
          :key="item.id"
        >
          <el-card
            shadow="hover"
            class="relative mb-3"
            :body-style="{ padding: 0 }"
          >
            <el-image
              :src="item.url"
              fit="cover"
              class="w-full h-[150px]"
              :preview-src-list="[item.url]"
              :initial-index="0"
            ></el-image>
            <div class="image-title">{{ item.name }}</div>
            <div class="flex items-center justify-center p-2">
              <el-button
                type="primary"
                size="small"
                @click="handleEdit(item)"
                text
              >
                重命名
              </el-button>

              <el-popconfirm
                title="是否要删除该图片？ "
                confirmButtonText="确认"
                cancelButtonText="取消"
                @confirm="handleDelete(item)"
              >
                <template #reference>
                  <el-button type="primary" size="small" text> 删除 </el-button>
                </template>
              </el-popconfirm>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <div class="bottom">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        :current-page="currentPage"
        :page-size="limit"
        @current-change="getData"
      />
    </div>
  </el-main>

  <el-drawer v-model="drawer" title="上传图片">
    <uploadFile :data="{ image_class_id }" @success="handleUploadSuccess" />
  </el-drawer>
</template>

<script setup>
  import { ref } from 'vue'
  import uploadFile from '@/components/UploadFile.vue'
  import { showPrompt, toast } from '@/utils'
  import { getImageList, updateImage, deleteImage } from '@/api/image.js'

  const loading = ref(false)
  const list = ref([])
  const limit = ref(10)
  const total = ref(0)
  const currentPage = ref(1)
  const image_class_id = ref(0)
  function getData(p) {
    if (typeof p === 'number') {
      currentPage.value = p
    }

    loading.value = true
    getImageList(image_class_id.value, currentPage.value)
      .then((res) => {
        list.value = res.data.list
        total.value = res.data.totalCount
      })
      .finally(() => (loading.value = false))
  }

  function loadData(id) {
    currentPage.value = 1
    image_class_id.value = id
    getData()
  }

  // 重命名
  function handleEdit(row) {
    showPrompt('重命名', row.name).then((res) => {
      const { value } = res
      loading.value = true
      updateImage(row.id, value)
        .then((res) => {
          toast('重命名成功')
          getData()
        })
        .finally(() => (loading.value = false))
    })
  }

  // 删除
  function handleDelete(row) {
    loading.value = true
    deleteImage([row.id])
      .then((res) => {
        toast('删除成功')
        getData()
      })
      .finally(() => (loading.value = false))
  }

  // 上传图片
  const drawer = ref(false)
  const openUploadFile = () => (drawer.value = true)
  const closeUploadFile = () => (drawer.value = false)
  const handleUploadSuccess = () => {
    toast('上传图片成功')
    closeUploadFile()
    getData(1)
  }
  defineExpose({
    loadData,
    openUploadFile,
    closeUploadFile,
  })
</script>

<style scoped>
  .image-main {
    position: relative;
  }

  .image-main .top {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 50px;
    overflow-y: auto;
  }

  .image-main .bottom {
    position: absolute;
    height: 50px;
    bottom: 0;
    left: 0;
    right: 0;
    @apply flex items-center justify-center;
  }

  .image-title {
    position: absolute;
    top: 122px;
    left: -1px;
    right: -1px;
    @apply text-sm truncate text-gray-100 bg-opacity-50 bg-gray-800 px-2 py-1;
  }
</style>
